import styled from "@emotion/styled";
import { TabProps, Tab, TabsProps, Tabs } from "@mui/material";

const NulMainTab = styled((props: TabProps) => <Tab iconPosition='start' disableRipple {...props} />)({
  lineHeight: '20px',
  textTransform: 'capitalize',
  fontWeight: 400,
  fontStyle: 'normal',
  width: '240px',
  maxHeight: '40px',
  opacity: 1,
  margin: 0,
  padding: '0 6px 0 16px',
  justifyContent: 'flex-start',
  minHeight: '40px',
  '& .MuiTab-iconWrapper': {
    marginRight: '12px',
  },
  'svg path': {
    stroke: '#596A7C',
  },
  '&:hover': {
    backgroundColor: 'rgba(206, 221, 249, 0.5)',
    opacity: 1,
  },
  '&.Mui-selected': {
    backgroundColor: '#CEDDF9',
    fontWeight: 400,
    color: '#262E35',
    'svg path': {
      stroke: '#262E35',
    },
  },
  '&.Mui-focusVisible': {
    backgroundColor: '#d1eaff',
  },
  fontFamily: "Open Sans",
  fontSize: '14px',
  color: '#484848'
});

const NulMainTabs = styled((props: TabsProps) =>
  <Tabs
    orientation="vertical"
    variant="scrollable"
    TabIndicatorProps={{
      style: {
        display: 'none'
      },
    }} {...props}>
    {props.children}
  </Tabs>)({
    justifyContent: 'flex-start',
    height: '100%'
  });

export { NulMainTab, NulMainTabs };